<template>
  <div class="section-css">
    <div>
      <navigator ref="navigator" @nav-item="onNavigatorItemClick"></navigator>
    </div>
    <div>
      <editor :uuid="editorUUID"></editor>
      <div></div>
      <boards
        v-if="boardsItem.name"
        :label="boardsItem.name"
        @click-boards-items="onClickAction('boards-item', $event)"
      ></boards>
    </div>
  </div>
</template>
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import navigator from './navigator.vue';
import editor from './editor.vue';
import boards from './boards.vue';
@Component({
  components: {
    navigator,
    editor,
    boards,
  },
})
export default class SectionCss extends Vue {
  // 选中的Label
  private boardsItem: any = {};
  // 选中的Item id
  private editorUUID: string = '';
  private mounted() {
    //
  }

  private onNavigatorItemClick(item: any) {
    this.boardsItem = item;
  }

  private onClickAction(type: string, model: any) {
    switch (type) {
      case 'boards-item':
        this.editorUUID = model;
        this.boardsItem = {};
        (this.$refs.navigator as navigator).resetCurrent();
        break;
    }
  }
}
</script>
<style lang="less">
.section-css {
  height: 100%;
  display: flex;
  padding: 5px;
  box-sizing: border-box;
  > div:first-child {
    flex: 0 0 200px;
    margin-right: 5px;
    overflow: hidden;
  }
  > div:nth-child(2) {
    flex: 1 1 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    > .css-editor {
      flex: 1 1 1400px;
      max-width: 1400px;
    }
    > div:nth-child(2) {
      flex: 1 1 100px;
    }
    .css-boards {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 99;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      outline-style: groove;
      outline-color: rgba(0, 0, 0, 0.3);
      outline-width: 9999px;
      // box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
  }
}
</style>